<template>
  <div class="add-employee">
    <button class="add-employee-header" @click="() => $router.push('/employee')">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>返回
      <text>|</text>
    </button>
    <div class="add-employee-title" v-if="isEdit">修改员工</div>
    <div class="add-employee-title" v-else>添加员工</div>


  </div>
  <div class="add-employee-content">
    <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" :rules="rules" label-width="auto"
      class="demo-ruleForm" :size="formSize" status-icon>
      <el-form-item label="账号:" prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="员工姓名:" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入员工姓名" />
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio value="1">男</el-radio>
          <el-radio value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号:" prop="idNumber">
        <el-input v-model="ruleForm.idNumber" placeholder="请输入身份证号" />
      </el-form-item>
    </el-form>
    <div class="add-employee-btn">
      <el-button color="#626aef" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </div>

  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { addEmployee, queryEmployeeById, updateEmployee } from '@/api/employee'
import router from '@/router';

const formSize = ref('default')
const ruleFormRef = ref(null)
const ruleForm = reactive({
  username: '',
  name: '',
  phone: '',
  idNumber: '',
  sex: '1',
  id: ''
})

const rules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { required: true, message: '账号不能为空', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' },
    { required: true, message: '姓名不能为空', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  idNumber: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /^\d{17}[\d|x|X]$/, message: '请输入正确的身份证号', trigger: 'blur' },
  ],
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // console.log('验证成功！', ruleForm)
      if (isEdit.value) {
        // 修改
        await updateEmployee(ruleForm)
        .then(() => {
          ElMessage.success('修改成功！')
          router.push('/employee')
        })
        .catch(() => {
          ElMessage.error('修改失败！')
        })
        router.push('/employee')

      } else {
        await addEmployee(ruleForm).then(() => {
          ElMessage.success('提交成功！')
          resetForm(formEl)
        })
          .catch(() => {
            ElMessage.error('提交失败！')
          })
      }

    } else {
      console.log('提交错误！', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// 判断是否存在id
const isEdit = ref(false)

onMounted(async () => {
  // console.log(router.currentRoute.value.query);
  const id = router.currentRoute.value.query.id;
  if (id) {
    isEdit.value = true
    console.log('id', id);
    queryEmployeeById(id).then((res) => {
      console.log('res', res);
      Object.assign(ruleForm, res.data)
    })

  }
})

</script>

<style lang="scss">
.add-employee {
  display: flex;
  align-items: center;

  .add-employee-header {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: inherit;
    padding: 0;
    cursor: pointer;

    .el-icon {
      margin-right: 3px;
    }

    text {
      margin: 0 10px;
      color: #999;
      font-size: 14px;
      border-radius: 5px;
    }
  }

  .add-employee-title {
    font-size: 18px;
  }
}

.add-employee-content {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;

  .el-form {
    margin: 20px 0 0 100px;
  }

  .add-employee-btn {
    margin-top: 30px;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--el-border-color);

  }
}
</style>
